import React, { useState } from 'react';
import { Layout, Menu, Button, Input, Badge, Avatar, Dropdown } from 'antd';
import { 
  HomeOutlined, 
  ShoppingOutlined, 
  ThunderboltOutlined,
  ShoppingCartOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuOutlined
} from '@ant-design/icons';
import { Link, useNavigate, useLocation } from 'react-router-dom';

const { Header } = Layout;
const { Search } = Input;

const AppHeader: React.FC = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // 模拟认证状态
  const navigate = useNavigate();
  const location = useLocation();
  const [mobileMenuVisible, setMobileMenuVisible] = useState(false);

  // 确定当前选中的菜单项
  const getSelectedKey = () => {
    const path = location.pathname;
    if (path === '/') return 'home';
    if (path.startsWith('/products')) return 'products';
    if (path.startsWith('/seckill')) return 'seckill';
    if (path.startsWith('/cart')) return 'cart';
    if (path.startsWith('/orders')) return 'orders';
    return '';
  };

  const handleSearch = (value: string) => {
    navigate(`/products?search=${encodeURIComponent(value)}`);
  };

  const userMenu = (
    <Menu>
      <Menu.Item key="profile" icon={<UserOutlined />}>
        <Link to="/profile">个人中心</Link>
      </Menu.Item>
      <Menu.Item key="orders" icon={<ShoppingOutlined />}>
        <Link to="/orders">我的订单</Link>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={() => setIsAuthenticated(false)}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  const mainMenu = (
    <Menu mode="horizontal" selectedKeys={[getSelectedKey()]} className="main-menu">
      <Menu.Item key="home" icon={<HomeOutlined />}>
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item key="products" icon={<ShoppingOutlined />}>
        <Link to="/products">商品</Link>
      </Menu.Item>
      <Menu.Item key="seckill" icon={<ThunderboltOutlined />}>
        <Link to="/seckill">秒杀</Link>
      </Menu.Item>
    </Menu>
  );

  return (
    <Header className="app-header">
      <div className="header-container">
        <div className="logo">
          <Link to="/">
            <h1>秒杀商城</h1>
          </Link>
        </div>
        
        <div className="desktop-menu">
          {mainMenu}
        </div>
        
        <div className="search-container">
          <Search placeholder="搜索商品..." onSearch={handleSearch} style={{ width: 200 }} />
        </div>
        
        <div className="user-actions">
          {isAuthenticated ? (
            <>
              <Badge count={3} className="cart-badge">
                <Link to="/cart">
                  <Button type="text" icon={<ShoppingCartOutlined />} size="large" />
                </Link>
              </Badge>
              <Dropdown overlay={userMenu} placement="bottomRight">
                <Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} />
              </Dropdown>
            </>
          ) : (
            <div className="auth-buttons">
              <Button type="text">
                <Link to="/login">登录</Link>
              </Button>
              <Button type="primary">
                <Link to="/register">注册</Link>
              </Button>
            </div>
          )}
        </div>
        
        <div className="mobile-menu-button">
          <Button 
            type="text" 
            icon={<MenuOutlined />} 
            onClick={() => setMobileMenuVisible(!mobileMenuVisible)}
          />
        </div>
      </div>
      
      {mobileMenuVisible && (
        <div className="mobile-menu">
          <Menu mode="vertical" selectedKeys={[getSelectedKey()]}>
            <Menu.Item key="home" icon={<HomeOutlined />}>
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="products" icon={<ShoppingOutlined />}>
              <Link to="/products">商品</Link>
            </Menu.Item>
            <Menu.Item key="seckill" icon={<ThunderboltOutlined />}>
              <Link to="/seckill">秒杀</Link>
            </Menu.Item>
            <Menu.Item key="cart" icon={<ShoppingCartOutlined />}>
              <Link to="/cart">购物车</Link>
            </Menu.Item>
            {!isAuthenticated && (
              <>
                <Menu.Item key="login">
                  <Link to="/login">登录</Link>
                </Menu.Item>
                <Menu.Item key="register">
                  <Link to="/register">注册</Link>
                </Menu.Item>
              </>
            )}
          </Menu>
        </div>
      )}
    </Header>
  );
};

export default AppHeader; 